<template>
	<view class="wrap" v-if="con">
    <u-toast ref="uToast" />
    <u-swiper class="ban" :list="ban" height="500"></u-swiper>
    <view class="search-box">
      <view class="tit u-font-30">{{con.house_title}}</view>
      <view class="u-flex u-row-center box1">
        <view class="item">
          <view class="u-font-30 u-primary">{{getString('house_area')}}㎡</view>
          <view class="u-font-28 u-tips-color">面积</view>
        </view>
        <view class="line"></view>
        <view class="item">
          <view class="u-font-30 u-primary">{{getString('house_rent')}} <text v-if="con.house_rent">元</text> </view>
          <view class="u-font-28 u-tips-color">月租</view>
        </view>
      </view>
      <view class="u-flex u-row-between u-flex-wrap box2">
        <view class="item u-flex">
          <view class="lab">楼层</view>
          <view>{{getString('house_floor_num')}}楼</view>
        </view>
        <view class="item u-flex">
          <view class="lab">类型</view>
          <view>{{getString('house_floor_type_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">装修</view>
          <view>{{getString('house_decoration_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">支付</view>
          <view>{{getString('payment_method_type_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">朝向</view>
          <view>{{getString('house_toward_name')}}</view>
        </view>
      </view>
      <view class="box3 u-flex u-row-between u-col-center">
        <view>
          <view class="u-font-30 xs-name">房源经理：{{con.user_info.username}}</view>
          <!-- <view class="u-tips-color">滨湖金融港A座 物业经理</view> -->
        </view>
        <!-- <u-icon name="arrow-right" color="#333" size="28"></u-icon> -->
      </view>
      <view class="box4">
        <view class="u-font-30 u-m-b-10">{{getString('community_name')}}</view>
        <view class="u-tips-color">地址：{{getString('house_address')}}</view>
      </view>
      <view v-if="con.config_list && con.config_list.length > 0" class="box6">
        <view class="u-font-30 xs-name">房源设施</view>
        <view class="sheshi-list u-flex u-flex-wrap">
          <view v-for="item in con.config_list" :key="item.id" class="item u-flex">
            <image :src="http+item.configImage" mode="" class="icon"></image>
            <view>{{item.configName}}</view>
          </view>
        </view>
      </view>
      <view class="box5" v-if="content">
        <rich-text :nodes="content"></rich-text>
      </view>
      <view class="box7" v-if="type == 1 && con.appends && con.appends.length > 0">
        <view class="u-font-30 xs-name">跟进进度</view>
        <view v-if="con.appends" class="steps">
          <view v-for="item in con.appends" :key="item.id" class="item u-flex">
            <view class="icon"></view>
            <div class="name">
              <rich-text :nodes="item.content"></rich-text>
              <view class="time">{{timestampToDateFormat(item.createtime)}}</view>
            </div>
          </view>
        </view>
      </view>
      <view class="box7">
        <view class="u-font-30 xs-name" style="margin-bottom: 20rpx;">房屋图集</view>
        <view v-for="(item, index) in banCon" :key="index">
          <u-parse :html="item"></u-parse>
        </view>
        
      </view>
      <zb-ipx></zb-ipx>
      <view class="zb-bottom">
        <div class="zb-bottom-box">
          <u-button v-if="con.user_info.mobile && type == 2" type="primary" @click="call" class="call-btn u-font-30">拨打电话</u-button>
          <u-button type="primary" class="call-btn u-font-30" @click="link(id)">下单</u-button>
        </div>
        <zb-ipx></zb-ipx>
      </view>
    </view>
    
  </view>
</template>
<style lang="scss" scoped>
  .wrap{background-color: #fff; padding-bottom: 120rpx !important;}
  /deep/.call-btn{border-radius: 40rpx; margin: 0 0 0 20rpx; height: 70rpx; overflow: hidden; line-height: 1 !important;
    .u-btn{line-height: 70rpx !important; height: 70rpx !important}
  }
  .steps{
    .item{
      padding-bottom: 40rpx; position: relative; line-height: 36rpx; align-items: flex-start;
      &::after{content:''; display: block; width: 1px; height: 100%; background-color: #ededed; position: absolute; left: 10rpx; top: 20rpx; z-index: 1;}
      &:last-child{
        &::after{display: none;}
      }
      &:first-child{
        color: #2A70F9;
        .icon{background-color: #2A70F9;}
        
      }
    }
    .icon{width: 20rpx; height: 20rpx; background-color: #ddd; border-radius: 50%; position: relative; z-index: 50;margin-right: 16rpx; margin-top: 12rpx;}
    .name{flex: 1; width: 100%; font-size: 28rpx;}
    .time{font-size: 26rpx; color: #666; margin-top: 8rpx;}
    
  }
  .xs-name{margin-bottom: 10rpx; font-weight: bold;}
  .sheshi-list{
    .item{
      width: 32%; margin-right: 2%; margin-bottom: 10rpx;
      &:nth-child(3n+3){margin-right: 0px;}
    }
    .icon{width: 30rpx; height: 30rpx; object-fit: contain; margin-right: 10rpx;}
    .txt{}
  }
  .box1{
    margin-bottom: 20rpx;
    
    .item{width: 48%; text-align: center;}
  }
  .box2{
    padding-bottom: 20rpx; border-bottom: 1px solid #ededed; margin-bottom: 40rpx;
    .lab{width: 100rpx; color: #999;}
    .item{width: 48%; margin-bottom: 16rpx;}
  }
  .box3{
    margin-bottom: 6rpx;
    
  }
  .box4{
    padding: 20rpx; background-color: #F5F6FA; margin-bottom: 40rpx; border-radius: 6rpx;
  }
  .box6{
    
  }
  .box5,.box6{
    margin-bottom: 30rpx; padding-bottom: 30rpx; border-bottom: 1px solid #ededed;
  }
  .list{
    .item{
      padding: 30rpx; margin-bottom: 30rpx; border-bottom: 1px solid #ededed; padding-top: 0;
      .name{font-size: 30rpx; margin-bottom: 14rpx; color: #3C3D3E;}
      .lab{color: #3C3D3E; margin-bottom: 20rpx;}
      .price1{color: #2A70F9; font-size: 30rpx;}
      .div{margin-left: 20rpx;}
    }
  }
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding: 30rpx; margin-top: -30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; padding-bottom: 10rpx;
  }
  
</style>
<script>
	export default {
		data() {
			return {
        content:'',
        con:null,
        http:'',
        ban:[],
        type:1, // 1-业务员详情， 2-用户端房源详情
        id:'',
        banCon:[]
			}
		},
    onLoad(e){
      console.log('-----------', )
      this.type = e.type ? e.type : 1
      this.id = e.id
      this.http = this.$api.httpUrlApi();
      const apiFun = this.type === 1 ? this.$api.housingResourcesDetailApi : this.$api.userHousingResourcesDetailApi
      apiFun({house_sn: e.id}).then(res=>{
        if(res.code === 1){
          this.con = res.data;
          this.content = res.data.content ? res.data.content : '';
          if(res.data.images && res.data.images.length > 0){
            this.ban = res.data.images.map(m => {
              return this.http+m.image
            })
            this.banCon = res.data.images.map(m => {
              return `<img src="${this.http+m.image}">`
            })
          }
        }else{
          this.$refs.uToast.show({
            title: res.msg,
          })
        }
      })
    },
    watch: {
      
    },
    
		methods: {
      link(id){
        uni.navigateTo({
          url:'/rentHouse/kehu/submitOrder?id='+id
        })
        // this.$api.addOrderHousingResourcesApi(this.formData).then(res=>{
          
        // })
      },
      call(){
        uni.makePhoneCall({
        	phoneNumber: this.con.user_info.mobile //仅为示例
        });
      },
      timestampToDateFormat(timestamp) {
        const dateObj = new Date(timestamp*1000); // 创建Date对象
        const year = dateObj.getFullYear(); // 获取年份
        const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取月份，并补零
        const day = ("0" + dateObj.getDate()).slice(-2); // 获取日期，并补零
        
        return `${year}-${month}-${day}`; // 返回转换后的日期格式
      },
      getString(e){
        return this.con[e] ? this.con[e] : '-'
      },
      getOtherId(e, name){
        this[name] = e;
        if(name != 'areaId'){
          this.showShaix = false;
        }else{
          this.areaId2 = ''
        }
        getList()
      },
      // 筛选开光
      getShaix(e){
        this.shaix_type = e;
        this.showShaix = true;
      },
      // 获取列表
      getList(){
        
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
	}
</script>